<!DOCTYPE HTML>
<html>
<head>
    <%- (require('./tpls/common_meta'))() %>
    <title>demo2</title>

    <%- (require('./tpls/common_header'))() %>
    <style>
        body {
            background-color: #ddd;
            text-align: center;
        }

    </style>
    <script type="application/javascript">
        var _pageTime = {};
        _pageTime.startTime = new Date;
    </script>
</head>
<body>
<%var urlParams = data && data.urlParams? data.urlParams : {}%>
<%- (require('./tpls/common_body_header'))() %>
<div id="data1Content" data-test="<%= urlParams.testmode=='1'?Date.now():'' %>">
    <!--sonicdiff-data1-->
    <p id="partialRefresh"><%if(urlParams.testmode=='2'){%>局部刷新:<%= (new Date()).toLocaleString() %><%}%></p>
    <!--sonicdiff-data1-end-->
</div>
<div id="data2Content">
    <!--sonicdiff-data2-->
    <p id="data2">数据块</p>
    <!--sonicdiff-data2-end-->

    <p id="pageRefresh"><%if(urlParams.testmode=='1'){%>页面刷新:<%= (new Date()).toLocaleString() %><%}%></p>


</div>
<div>
    <p>sonicStatus:<span id="sonicStatus"></span></p>
    <p>reportSonicStatus:<span id="reportSonicStatus"></span></p>
    <p>jsbrigeTime:<span id="jsbrigeTime"></span></p>
    <p>pageTime:<span id="pageTime"></span></p>
</div>
<hr/>
<div>
    <p>sonic状态含义：</p>
    <p>0-非sonic</p>
    <p>2-页面刷新</p>
    <p>3-局部刷新</p>
    <p>4-完全缓存</p>
</div>
<script>
    _pageTime.contentLoadedTime = new Date;
</script>

<script src="http://open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>
<script src="http://imgcache.gtimg.cn/club/platform/lib/seajs/sea-with-plugin-2.2.1.js?_bid=250&max_age=2592000"
        id="seajsnode"></script>
<script>
    seajs.config({
        base: 'http://imgcache.gtimg.cn/club/platform/examples/',
        localcache: {
            //浏览器缓存时间
            maxAge: 2592000,
            openLocalStorageCache: 0
        },
        maxFile: {},
        debug: 1,
        //别名
        alias: {
            'zepto': 'lib/zepto/zepto'
        },
        paths: {
            'lib': 'http://imgcache.gtimg.cn/club/platform/lib'
        },
        manifest: {
            "lib/zepto/zepto": "1.1.3",
            "lib/sonic/sonic": "3-1"
        }
    });

    seajs.use(["zepto"], function ($) {
        /**
         * sonic后置函数
         */
        function afterSonicInit() {
            console.debug('afterSonicInit');
        }

        var sonicStatus = 0, //sonic状态 0-状态获取失败 1-sonic首次 2-页面刷新 3-局部刷新 4-完全cache
            reportSonicStatus = 0, //sonic上报状态
            sonicHadExecute = 0, //sonic执行标志位
            sonicUpdateData = {}; //sonic diff数据

        var sonicStartTime = new Date();
        window.sonic.getDiffData(); //执行sonicdiff
        window['getDiffDataCallback'] = function (result) {
            alert(JSON.stringify(result));
            if (result['code'] == 200) {
                reportSonicStatus = sonicStatus = 3;
                sonicUpdateData = JSON.parse(result['result']);
                //页面完全没有变化
            } else if (result['code'] == 1000) {
                reportSonicStatus = sonicStatus = 1;
            } else if (result['code'] == 2000) {
                reportSonicStatus = sonicStatus = 2;
            } else if (result['code'] == 304) {
                sonicStatus = 4;
                switch (parseInt(result['srcCode'])) { //上报状态处理
                    case 304:
                        reportSonicStatus = 4;
                        break;
                    case 200:
                        reportSonicStatus = 3;
                        break;
                    case 1000:
                        reportSonicStatus = 1;
                        break;
                    case 2000:
                        reportSonicStatus = 2;
                        break;
                    default:
                        reportSonicStatus = sonicStatus;
                }
            }
            if (sonicHadExecute == 0) {
                sonicCallback(sonicStatus, reportSonicStatus, sonicUpdateData);
                sonicHadExecute = 1;
            }
        }
        /**
         * sonic业务逻辑 diff数据处理，后置函数执行，状态上报
         * @param sonicStatus
         * @param reportSonicStatus
         * @param sonicUpdateData
         */
        var sonicCallback = function (sonicStatus, reportSonicStatus, sonicUpdateData) {
            if (sonicStatus == 1) {
                //首次没有特殊的逻辑处理，直接执行sonic完成后的逻辑，比如上报等
                afterSonicInit();
            } else if (sonicStatus == 2) {
                afterSonicInit();
            } else if (sonicStatus == 3) {
                mqq && mqq.debug && mqq.debug.detailLog({
                    id: "pingtai",
                    subid: "vipcenter",
                    content: 'sonic H5 debug data' + JSON.stringify(sonicUpdateData),
                    level: "info"
                });
                //局部刷新的时候需要更新页面的数据块和一些JS操作
                var html = '';
                var id = '';
                var elementObj = '';
                for (var key in sonicUpdateData) {
                    id = key.substring(1, key.length - 1);
                    html = sonicUpdateData[key];
                    elementObj = document.getElementById(id + 'Content');
                    elementObj.innerHTML = html;
                }
                afterSonicInit();
            } else if (sonicStatus == 4) {
                afterSonicInit();
            }
            alert('sonic数据：' + sonicStatus + JSON.stringify(sonicUpdateData));
            $("#sonicStatus").text(sonicStatus);
            $("#reportSonicStatus").text(reportSonicStatus);
            $("#jsbrigeTime").text((new Date) - sonicStartTime);
            _pageTime.jsendtTime = new Date();
            mqq.data.getPerformance(function (json) {
                alert(JSON.stringify(json, null, 2));
                if (json && 0 == json.result && json.data) {
                    var clickStart = json.data.clickStart || 0;
                    var webviewStart = json.data.webviewStart || 0;
                    var loadUrl = json.data.pageStart || 0;
                    var speedPoints = [];
                    speedPoints[0] = webviewStart - clickStart;      //第一个上报点，从click到webviewstart
                    speedPoints[1] = loadUrl - clickStart;      //第二上上报时间点，从webviewstart开始到loadurl之间的时间
                    speedPoints[2] = _pageTime.startTime - clickStart;      //从开始loadurl，到html头获取到得时间点
                    speedPoints[3] = _pageTime.contentLoadedTime - clickStart;      //从html开始时间点到domready时间点
                    speedPoints[4] = _pageTime.jsendtTime - clickStart;      //从domready到可以交互的时间点
                    //alert(JSON.stringify(speedPoints))
                    $('#pageTime').text(JSON.stringify(speedPoints));
                    //alert(JSON.stringify(speedPoints))

                }
            });
        }
        /**
         * sonic超时处理
         */
//        setTimeout(function () {
//            if (sonicHadExecute == 0) {
//                sonicHadExecute = 1;
//                sonicCallback(sonicStatus, reportSonicStatus, sonicUpdateData);
//            }
//        }, 5000);
    });

</script>
</body>
</html>